<template>
  <h1>name:{{ b.name }}</h1>
  <!-- <h1>b.obj.name:{{b.obj.name}}</h1>  模板访问会触发响应式，用watch来验证-->
</template>
<script setup lang="ts" name="Count">
import { reactive, ref, watch,readonly } from 'vue'

const b = reactive({ name: 'zll', age: 10, obj: { name: '小红' } })
const copyB = readonly(b)

// 会报错copyB只是可读状态，不可更改
setTimeout(()=>{
copyB.name = 'e'
copyB.obj.name = '小三' 
},2000)

// 监听 b.name（第一层属性）
watch(
  () => copyB.name,
  (newVal) => {
    console.log('b.name changed:', newVal) // 会触发
  }
)

// 监听 b.obj.name（嵌套属性）
watch(
  () => c.obj.name,
  (newVal) => {
    console.log('b.obj.name changed:', newVal) // 不会触发！
  }
)
</script>
